<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }
    
        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="/static/js/babylon.js"></script>
<script src="/static/js/babylon.inspector.bundle.js"></script>
<!-- <script src="https://preview.babylonjs.com/babylon.js"></script> -->
<!-- <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script> -->
<script>
    var canvas = document.getElementById('renderCanvas');
    var engine = new BABYLON.Engine(canvas, true);

    const createScene = function () {
    
        const scene = new BABYLON.Scene(engine);

        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
        camera.attachControl(canvas, true);
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

        const groundMat = new BABYLON.StandardMaterial("groundMat");
        groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0)

        //texture
        const roofMat = new BABYLON.StandardMaterial("roofMat");
        roofMat.diffuseTexture = new BABYLON.Texture("/static/environments/roof.jpg");
        const boxMat = new BABYLON.StandardMaterial("boxMat");
        boxMat.diffuseTexture = new BABYLON.Texture("/static/environments/semihouse.png")


        //options parameter to set different images on each side
        const faceUV = [];
        faceUV[0] = new BABYLON.Vector4(0.6, 0.0, 1.0, 1.0); //rear face
        faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.4, 1.0); //front face
        faceUV[2] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //right side
        faceUV[3] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //left side
        // top 4 and bottom 5 not seen so not set
        

        /**** World Objects *****/
        const box = BABYLON.MeshBuilder.CreateBox("box", {width: 2, faceUV: faceUV, wrap: true});
        box.material = boxMat;
        box.position.y = 0.5;
        const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameter: 1.3, height: 1.2, tessellation: 3});
        roof.material = roofMat;
        roof.scaling.x = 0.75;
        roof.scaling.y = 2;
        roof.rotation.z = Math.PI / 2;
        roof.position.y = 1.22;
        const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});
        ground.material = groundMat;

        const house = BABYLON.Mesh.MergeMeshes([box, roof], true, false, null, false, true);
        house.position.x = -2.5;
        house.position.z = -4;

        const semiHouse = house.clone("clonedHouse");
        semiHouse.scaling.x = .5;
        semiHouse.position.x = 2.5;
        semiHouse.position.z = -4;

        for (let i = 0; i < 2; i++) {
            for (let j = 1; j < 5; j++) {
                const copied = (i % 2 ? semiHouse : house).createInstance("house" + i + "_" + j);
                copied.position.x = i * 5 - 2.5;
                copied.position.z = j * 2 - 4;
            }
        }

        return scene;
    };
        
    var scene = createScene();
    scene.debugLayer.show();

    function exportScene() {
        BABYLON.GLTF2Export.GLBAsync(scene, "fileName").then((glb) => {
            glb.downloadFiles();
        });
    }

    engine.runRenderLoop(function() {
        scene.render();
    });

    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
</body>
</html>